<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>index</title>

    <!-- Bootstrap -->
    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <link href="./css/index.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>

<body class="index_bg">
    <!--导航-->
    <div class="navbar navbar-inverse">
        <div class="container">
            <div class="navbar-header text-center">
                <!-- 用户信息 -->
                <a class="navbar-brand user_msg" href="javascript:;"><img class="img-responsive" src="./img/geren5@2x.png" alt="" style="width:50%;"></a>
                <!-- 标题 -->
                <span class="title">加密大陆</span>
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navBar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>

            <div class="collapse navbar-collapse navbar-right" id="navBar">
                <ul class="nav navbar-nav">
                    <li><a href="index.html">首页</a></li>
                    <li><a href="javascript:;">充币</a></li>
                    <li><a href="javascript:;">提币</a></li>
                    <li><a href="javascript:;">捐款轮数</a></li>
                    <li><a href="javascript:;">加密大陆</a></li>
                    <li><a href="javascript:;">我的团队</a></li>
                    <li><a href="javascript:;">我的收益</a></li>
                    <li><a href="javascript:;">币种设置</a></li>
                </ul>
            </div>

            <!-- 用户信息 -->
            <div class="user_wrapper">
                <div class="user_container">
                    <img class="user_head" src="./img/user.jpg" alt="用户头像">
                    <p class="user_id">ID 54614</p>
                    <div class="btns">
                        <a href="javascript:;">个人中心</a>
                        <a href="javascript:;">退出</a>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="container-fluid">
        <!-- 最新公告 -->
        <div class="con_t1 text_shadow">最新公告</div>
        <div class="con_t1_msg">
            <h3>公告</h3>
            <p>2018-11-12 17:47</p>
            <p>尊敬的用户：大家好，比特币4号第十四轮分红活动将定于2018年11月11日：<a href="javascript:;">详情</a></p>
        </div>
        <div class="con_t1_msg">
            <h3>公告</h3>
            <p>2018-11-12 17:47</p>
            <p>尊敬的用户：大家好，比特币4号第十四轮分红活动将定于2018年11月11日：<a href="javascript:;">详情</a></p>
        </div>
        <div class="con_t1_msg">
            <h3>公告</h3>
            <p>2018-11-12 17:47</p>
            <p>尊敬的用户：大家好，比特币4号第十四轮分红活动将定于2018年11月11日：<a href="javascript:;">详情</a></p>
        </div>

        <!-- ETH资产 -->
        <div class="con_t2 text_shadow">ETH资产</div>
        <div class="row">
            <div class="col-md-3 col-xs-12">
                <div class="con_t2_msg">
                    <div class="con_t2_top">
                        <p class="con_t2_f1 f18_lh31">1.46578</p>
                        <div class="con_t2_f2 f14_lh31"><img src="./img/zc1.png" alt="钱包" width="14" height="14">钱包</div>
                    </div>
                    <a href="javascript:;" class="con_t2_bottom">
                        <img src="./img/right.png" alt="右箭头" width="15" height="13">
                    </a>
                </div>
            </div>
            <div class="col-md-3 col-xs-12">
                <div class="con_t2_msg">
                    <div class="con_t2_top">
                        <p class="con_t2_f1">1.5555 - 0.150000</p>
                        <div class="con_t2_f2"><img src="./img/zc1.png" alt="投资中" width="14" height="14">投资中（自动复投）</div>
                    </div>
                    <a href="javascript:;" class="con_t2_bottom">
                        <img src="./img/right.png" alt="右箭头" width="15" height="13">
                    </a>
                </div>
            </div>
            <div class="col-md-3 col-xs-12">
                <div class="con_t2_msg">
                    <div class="con_t2_top">
                        <p class="con_t2_f1 f18_lh31">0.00000</p>
                        <div class="con_t2_f2 f14_lh31"><img src="./img/zc1.png" alt="待返还" width="14" height="14">待返还（取消复投）</div>
                    </div>
                    <a href="javascript:;" class="con_t2_bottom">
                        <img src="./img/right.png" alt="右箭头" width="15" height="13">
                    </a>
                </div>
            </div>
            <div class="col-md-3 col-xs-12">
                <div class="con_t2_msg">
                    <div class="con_t2_top">
                        <p class="con_t2_f1 f18_lh31">0.000000</p>
                        <div class="con_t2_f2 f14_lh31"><img src="./img/zc1.png" alt="冻结中" width="14" height="14">冻结中（提现）</div>
                    </div>
                    <a href="javascript:;" class="con_t2_bottom">
                        <img src="./img/right.png" alt="右箭头" width="15" height="13">
                    </a>
                </div>
            </div>
        </div>

        <!-- ETH一号第1轮 -->
        <div class="con_t2 text_shadow">ETH一号第1轮</div>
        <div class="row">
            <div class="col-md-3 col-xs-6">
                <div class="ethOneNum">
                    <div class="oneNum_title"><img src="./img/num1.png" alt="第一轮" width="20" height="20">ETH一号</div>
                    <p>第一轮</p>
                </div>
            </div>
            <div class="col-md-3 col-xs-6">
                <div class="ethOneNum">
                    <div class="oneNum_title"><img src="./img/num2.png" alt="当前状态" width="20" height="20">当前状态</div>
                    <p>已结束</p>
                </div>
            </div>
            <div class="col-md-3 col-xs-6">
                <div class="ethOneNum">
                    <div class="oneNum_title"><img src="./img/num3.png" alt="目标数量" width="20" height="20">目标数量</div>
                    <p>3333.333333</p>
                </div>
            </div>
            <div class="col-md-3 col-xs-6">
                <div class="ethOneNum">
                    <div class="oneNum_title"><img src="./img/num4.png" alt="已筹集" width="20" height="20">已筹集</div>
                    <p>3333.33333</p>
                </div>
            </div>
        </div>

        <!-- 饼状统计图 -->
        <div id="main" style="width: 252px;height:252px;margin:0 auto 20px;"></div>
    </div>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="./js/jquery-2.1.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/echarts.js"></script>
    <script src="./js/index.js"></script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            series: [{
                    name: '访问来源',
                    type: 'pie',
                    selectedMode: 'single',
                    radius: '90%',
                    label: {
                        normal: {
                            position: 'inner'
                        }
                    },
                    data: [
                        { value: 335, name: '直达' },
                        { value: 679, name: '营销广告' },
                        { value: 1548, name: '搜索引擎' }
                    ]
                }

            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

</html>